微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题 | 您所在的位置:网站首页 › html video 全屏 › 微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题 |
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步,自动全屏,不能全屏,不能自动播放,Android,IOS,巴拉巴拉……多到令人发指!今天整理了一下相关的解决办法,以上并不是全部解决了,但是起码能打个60分…… 第一步:设置 x5videoplayertype 启用H5同层播放器通过video属性“x5videoplayertype”声明启用同层H5播放器 x5videoplayertype支持的值类型:h5 注意:这个属性需要在播放前设置好,播放之后设置无效 第二部:设置 x5videoplayerfullscreen 全屏方式视频播放时将会进入到全屏模式 注:声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听 resize 事件 来实现 需要监听窗口大小变化(resize)实现全屏 window.onresize = function(){ test_video.style.width = window.innerWidth + "px"; test_video.style.height = window.innerHeight + "px"; } 第三部:设置 x5videoorientation 播放器横竖屏方向横屏 竖屏 跟随手机自动旋转 注: 此属性只在声明了 x5videoplayertype=”h5” 情况下生效 第三步:设置playsinline不全屏播放 第四部:设置 WeixinJSBridgeReady 自动播放HTML JS document.addEventListener(“WeixinJSBridgeReady”, function() { document.getElementById(‘video’).play(); }, false); 注意:这个自动播放只能IOS支持,Android就无能为力了,但是也有解,Canvas可解,具体代码可以Google一下,比如: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas 或者一大胸弟写的: https://www.bbsmax.com/A/ke5jVePV5r/ 此致,那个敬礼! |
CopyRight 2018-2019 实验室设备网 版权所有 |